<script setup lang="ts">
import {ref} from "vue"
import dayjs from 'dayjs';

const time1 = ref()
const in1 = ref()
const clickBtn1=()=>{
  in1.value=time1.value.getTime() /1000
}


const in2 =ref()
const in3 = ref()
const clickBtn2=()=>{
  in3.value = dayjs(new Date(in2.value*1000)).format('YYYY-MM-DD HH:mm:ss')
}


</script>

<template>
  <el-card>
    <div class="h-80">
      <div class="mb-2">
        <span>日期转Unix时间戳</span>
        <div class="flex mt-1">
          <div class="w-2/5 mr-2">
            <el-date-picker
              style="width: 100%"
              v-model="time1"
              type="datetime"
              placeholder="Select date and time"
            />
          </div>
          <el-button class="mr-2" type="primary" @click="clickBtn1">转换</el-button>
          <div class="w-2/5">
            <el-input v-model="in1" placeholder="Please input" />
          </div>
        </div>
      </div>
      <div class="mb-2">
        <span>Unix时间戳转日期</span>
        <div class="flex mt-1">
          <div class="w-2/5 mr-2">
            <el-input v-model="in2"  placeholder="请输入Unix时间戳" />
          </div>
          <el-button class="mr-2" type="primary" @click="clickBtn2">转换</el-button>
          <div class="w-2/5">
            <el-input v-model="in3"  placeholder="Please input" />
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">

</style>
